﻿@model store.Product
@{
    ViewBag.Title = "Chi tiết sản phẩm";
}
<!-- SIDEBAR + MAIN CONTENT CONTAINER -->
<div class="main-content">
    <div class="container">

        <div class="row">

            <!-- SIDE BAR -->
            <div class="col-xs-12 col-sm-4 col-lg-3 pull-right side">
                @Html.Action("SidebarRandomProduct")
            </div>
            <!-- /SIDE BAR -->

            <!-- MAIN CONTENT -->
            <div class="col-xs-12 col-sm-8 col-lg-9 main">

                <!-- SINGLE PRODUCT DETAILS -->
                <div class="section product-single">
                    <div class="row">
                        <div class="col-xs-12 col-sm-5">
                            <div class="product-album">
                                <a href="#" class="jq-zoom" tite="click to view full size, hover to zoom">
                                    @if (Model.Picture.Length > 1)
                                    {
                                        var listImg = Model.Picture.Split(',');
                                        <img class="img-thumbnail" src="~/Files/@listImg[1]" alt="@Model.ProductName" title="@Model.ProductName"/>
                                    }
                                </a>
                                <ul class="listimg">
                                    @if (Model.Picture.Length > 1)
                                    {
                                        var listImg = Model.Picture.Split(',');
                                        for (int i = 1; i < listImg.Length; i++)
                                        {
                                        <li>
                                            <a href="javascript:void(0);">
                                                <img class="img-thumbnail" src="~/Files/@listImg[i]" alt="@Model.ProductName" title="@Model.ProductName" />
                                            </a>
                                        </li>
                                        }

                                    }
                                </ul>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-7">
                            <div class="product-info clearfix">
                                <h4 class="title">
                                    <a href="#">@Model.ProductName</a>
                                </h4>
                                <div class="description">
                                    @using (Ajax.BeginForm("AddToCart", "Cart", null, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "basket" }, new { @id = "form_add_to_cart" }))
                                    {
                                        <div class="prices">
                                            @if (Model.Sales > 0)
                                            {
                                                <span class="off-price">@String.Format("{0:0,000}", Model.UnitPrice - (Model.UnitPrice * (decimal)Model.Sales) / 100) VND</span>
                                                @Html.Raw("- ")<s class="orginal-price">@String.Format("{0:0,000}", Model.UnitPrice) VND</s>
                                            }
                                            else
                                            {
                                                <span class="off-price">@String.Format("{0:0,000}", Model.UnitPrice) VND</span>
                                            }


                                        </div>
                                        <div class="text">
                                            <p>Còn hàng</p>
                                            <p>@Model.ShortDesciption <a href="#" class="readmore" title="read more">[...] </a></p>
                                        </div>
                                        <input type="hidden" value="@Model.Picture" name="images" />
                                        <input type="hidden" value="@Model.ProductName" name="name" />
                                        <input type="hidden" value="@Model.ProductID" name="productId" />
                                        <input type="hidden" value="@Model.UnitPrice" name="price" />
                                        <div class="qty">
                                            <label for="qty-input">Số lượng:</label>
                                            <input type="text" id="qty-input" value="1" name="qty" />
                                            <div class="space30 clearfix"></div>
                                        </div>
                                        <div class="add-to-cart">
                                            <input type="submit" class="btn btn-primary" value="+ Thêm vào giỏ" />
                                        </div>
                                        <ul class="links">
                                            <li><a href="#" title="Add to Wishlist">+ Thêm vào yêu thích</a></li>
                                        </ul>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-11">
                            <h3>HỈNH ẢNH</h3>
                            <hr />
                            @if (Model.Picture.Length > 1)
                            {
                                var listImg = Model.Picture.Split(',');
                                for (int i = 1; i < listImg.Length; i++)
                                {
                                <img src="~/Files/@listImg[i]" alt="@Model.ProductName" title="@Model.ProductName" />
                                }

                            }
                        </div>
                    </div>
                </div>
                <!-- /SINGLE PRODUCT DETAILS -->

                <!-- RELATED PRODUCTS -->
                <div class="section with-carousel">
                    <div class="container">

                        <div class="row carousel-container offer">
                            <div class="col-xs-12 col-sm-12">

                                <h4 class="section-title">Sản phẩm liên quan</h4>
                                <div class="section-body">

                                    <!-- carousel control nav direction -->
                                    <div class="control-direction">
                                        <ul class="direction-nav carousel-direction">
                                            <li>
                                                <a class="carousel-prev btn" href="#">
                                                    <span class="icon-arrow-left"></span>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="carousel-next btn" href="#">
                                                    <span class="icon-arrow-right"></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- /carousel control nav direction -->

                                    <!-- carousel wrapper -->
                                    <div class="carousel-wrapper row" data-minitems="1" data-maxitems="4" data-loop="true" data-autoplay="false" data-slideshow-speed="3000" data-speed="300">
                                        <ul class="products-container product-grid carousel-list portrait animated" data-animation="fadeInUp">

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="ribbon special"></div>
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/Robert-Rodriguez-Lace-Applique-Pleated-Strapless-Dress.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/Nanette-Lepore-La-Boqueria-Embroidered-Top-Flamenco-Floral-Print-Skirt.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                            <div class="caption top-right">- 20%</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="ribbon special"></div>
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/2013-Women-s-O-neck-Retro-Sequins-Floral-Printed-Pure-Silk-Satin-Dress-IM-02311378-1.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/Nanette-Lepore-Go-Crazy-Mixed-Knit-Dress.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                            <div class="caption top-right">- 20%</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="ribbon special"></div>
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/Nanette-Lepore-Amorcito-One-Shoulder-Knit-Dress.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/Nanette-Lepore-Barcelona-Crochet-Blazer-Sunbathe-Printed-Sleeveless-Top.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                            <div class="caption top-right">- 20%</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="ribbon special"></div>
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/2013-New-Women-s-O-neck-Short-Sleeve-Slim-Dot-Printed-Pure-Silk-Satin-Dress-IM-03151261-1.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="product">
                                                    <a href="#" class="product-link clearfix">
                                                        <div class="product-thumbnail">
                                                            <img src="~/Content/Home/img/offer/Alexander-McQueen-Cap-Sleeve-Puckered-Jacquard-Sheath-Dress.jpg" alt="" />
                                                            <div class="caption bottom-left">$110</div>
                                                            <div class="caption top-right">- 20%</div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info clearfix">
                                                        <h4 class="title">
                                                            <a href="#">Woman Summer Dresses</a>
                                                        </h4>
                                                        <div class="details">
                                                            <p>
                                                                Model: <a href="#">Saverina Dark</a>
                                                            </p>
                                                            <p class="by">
                                                                by: <a href="#">shopfast</a>
                                                            </p>
                                                        </div>
                                                        <a href="#" class="add-to-cart">
                                                            <span class="icon-shopcart"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                    <!-- /carousel wrapper -->

                                </div>

                            </div>
                        </div>

                    </div>
                </div>
                <!-- /RELATED PRODUCTS -->

            </div>

        </div>

    </div>
</div>
@section scripts
{
    @Scripts.Render("~/Scripts/jquery.validate.min.js")
    @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
    @Scripts.Render("~/Content/Home/js/jquery.zoom-min.js")
}
